முன்னோக்கிய பைப்லைன்: உலகளாவிய பார்வையாளர்களுக்கான ஜாவாஸ்கிரிப்ட் செயல்திறனை தானியக்கமாக்குதல்

டிஜிட்டல் பொருளாதாரத்தில், வேகம் ஒரு உலகளாவிய மொழி. டோக்கியோ, லண்டன் அல்லது சாவோ பாலோவில் உள்ள ஒரு பயனர் ஒரே எதிர்பார்ப்பைக் கொண்டிருக்கிறார்: வேகமான, தடையற்ற டிஜிட்டல் அனுபவம். ஒரு வலைப் பயன்பாடு தடுமாறும்போது, உறையும்போது அல்லது ஏற்றுவதற்கு வினாடிகள் எடுக்கும்போது, அது ஒரு அசௌகரியம் மட்டுமல்ல; அது அந்த எதிர்பார்ப்பின் மீறலாகும். இது பயனர் ஈடுபாடு, மாற்று விகிதங்கள் மற்றும் பிராண்ட் நற்பெயரின் அமைதியான கொலையாளி. பல ஆண்டுகளாக, செயல்திறன் பகுப்பாய்வு ஒரு எதிர்வினை ஒழுக்கமாக இருந்து வருகிறது—பயனர்கள் புகார் செய்யத் தொடங்கிய பிறகு Chrome DevTools-க்குள் ஒரு தீவிரமான ஆழமான தேடல். தொடர்ச்சியான வரிசைப்படுத்தல் மற்றும் உலகளாவிய பயனர் தளங்களின் உலகில் இந்த அணுகுமுறை இனி நீடிக்காது.

முன்னோக்கிய பைப்லைனுக்கு வரவேற்கிறோம். இது கைமுறை, தற்காலிக செயல்திறன் சோதனைகளிலிருந்து கண்காணிப்பு மற்றும் அமலாக்கத்தின் ஒரு முறையான, தானியங்கு மற்றும் தொடர்ச்சியான செயல்முறைக்கு ஒரு முன்னுதாரண மாற்றமாகும். யூனிட் டெஸ்டிங் அல்லது பாதுகாப்பு ஸ்கேனிங் போலவே, செயல்திறனை உங்கள் மேம்பாட்டு வாழ்க்கைச் சுழற்சியின் ஒரு முக்கிய கோட்பாடாக உட்பொதிப்பதாகும். ஜாவாஸ்கிரிப்ட் செயல்திறன் சுயவிவரத்தை தானியக்கமாக்குவதன் மூலம், நீங்கள் உற்பத்திக்கு வருவதற்கு முன்பே பின்னடைவுகளைப் பிடிக்கலாம், தரவு சார்ந்த மேம்படுத்தல் முடிவுகளை எடுக்கலாம், மேலும் ஒவ்வொரு பயனரும், அவர்களின் இருப்பிடம் அல்லது சாதனத்தைப் பொருட்படுத்தாமல், சிறந்த அனுபவத்தைப் பெறுவதை உறுதிசெய்யலாம்.

இந்த விரிவான வழிகாட்டி, உங்கள் சொந்த தொடர்ச்சியான செயல்திறன் கண்காணிப்பு பைப்லைனை உருவாக்குவதற்கான ஏன், என்ன, மற்றும் எப்படி என்பதை உங்களுக்கு விளக்கும். நாங்கள் கருவிகளை ஆராய்வோம், முக்கியமான அளவீடுகளை வரையறுப்போம், மேலும் இந்த சோதனைகளை நேரடியாக உங்கள் CI/CD பணிப்பாய்வில் எவ்வாறு ஒருங்கிணைப்பது என்பதற்கான நடைமுறை எடுத்துக்காட்டுகளை வழங்குவோம்.

கைமுறை சுயவிவரத்திலிருந்து தானியங்கு நுண்ணறிவுகளுக்கு: ஒரு அவசியமான பரிணாமம்

பெரும்பாலான ஃபிரன்ட்-எண்ட் டெவலப்பர்கள் தங்கள் உலாவியின் டெவலப்பர் கருவிகளில் உள்ள செயல்திறன் மற்றும் லைட்ஹவுஸ் தாவல்களைப் பற்றி அறிந்திருக்கிறார்கள். இவை ஒரு குறிப்பிட்ட பக்கத்தில் உள்ள சிக்கல்களைக் கண்டறிவதற்கான நம்பமுடியாத சக்திவாய்ந்த கருவிகள். ஆனால் அவற்றை மட்டும் நம்பியிருப்பது, ஒரு வானளாவிய கட்டிடத்தின் கட்டமைப்பு ஒருமைப்பாட்டை வருடத்திற்கு ஒரு முறை ஒரு ஆதரவு தூணை மட்டும் சரிபார்த்து உறுதி செய்வது போன்றது.

கைமுறை சுயவிவரத்தின் வரம்புகள்

• இது செயல்திட்டமானது, முன்முயற்சியானது அல்ல: கைமுறை சோதனைகள் பொதுவாக ஒரு சிக்கல் ஏற்கனவே அடையாளம் காணப்பட்ட பின்னரே நிகழ்கின்றன. நீங்கள் ஒரு தீயை அணைக்கிறீர்கள், அதைத் தடுக்கவில்லை. ஒரு டெவலப்பர் வேகக்குறைவை விசாரிக்க DevTools-ஐ திறக்கும் நேரத்தில், உங்கள் பயனர்கள் ஏற்கனவே வலியை உணர்ந்திருப்பார்கள்.
• இது ஒழுங்கற்றது: வேகமான அலுவலக நெட்வொர்க்குடன் இணைக்கப்பட்ட ஒரு உயர்நிலை மேம்பாட்டு கணினியில் நீங்கள் பெறும் முடிவுகள், சீரற்ற இணைப்புள்ள ஒரு பகுதியில் உள்ள ஒரு நடுத்தர மொபைல் சாதனத்தில் ஒரு பயனர் அனுபவிப்பதிலிருந்து முற்றிலும் வேறுபட்டவை. கைமுறை சோதனைகளில் கட்டுப்படுத்தப்பட்ட, மீண்டும் செய்யக்கூடிய சூழல் இல்லை.
• இது நேரம் எடுக்கும் மற்றும் அளவிட முடியாதது: முழுமையான செயல்திறன் சுயவிவரத்திற்கு குறிப்பிடத்தக்க நேரம் மற்றும் நிபுணத்துவம் தேவை. ஒரு பயன்பாடு சிக்கலான தன்மையிலும் குழு அளவிலும் வளரும்போது, டெவலப்பர்கள் ஒவ்வொரு கமிட்டையும் செயல்திறன் பின்னடைவுகளுக்காக கைமுறையாகச் சரிபார்ப்பது சாத்தியமற்றதாகிவிடும்.
• இது அறிவுத் தடைகளை உருவாக்குகிறது: பெரும்பாலும், ஒரு குழுவில் உள்ள சில 'செயல்திறன் சாம்பியன்கள்' மட்டுமே சிக்கலான ஃபிளேம் சார்ட்ஸ் மற்றும் ட்ரேஸ் கோப்புகளை விளக்குவதற்கான ஆழ்ந்த நிபுணத்துவத்தைக் கொண்டுள்ளனர், இது மேம்படுத்தல் முயற்சிகளுக்கு ஒரு இடையூறை உருவாக்குகிறது.

தானியக்கம் மற்றும் தொடர்ச்சியான கண்காணிப்புக்கான வாதம்

செயல்திறன் சுயவிவரத்தை தானியக்கமாக்குவது அதை ஒரு அவ்வப்போது தணிக்கையிலிருந்து தொடர்ச்சியான பின்னூட்ட வளையமாக மாற்றுகிறது. இந்த அணுகுமுறை, பெரும்பாலும் CI/CD சூழலில் "செயற்கை கண்காணிப்பு" என்று அழைக்கப்படுகிறது, இது ஆழமான நன்மைகளை வழங்குகிறது.

• பின்னடைவுகளை முன்கூட்டியே கண்டறியுங்கள்: ஒவ்வொரு கமிட் அல்லது புல் ரிக்வெஸ்ட்டிலும் செயல்திறன் சோதனைகளை இயக்குவதன் மூலம், வேகக்குறைவை ஏற்படுத்திய சரியான மாற்றத்தை உடனடியாக அடையாளம் காணலாம். இந்த "இடதுபுற நகர்வு" அணுகுமுறை சிக்கல்களை சரிசெய்வதை அதிவேகமாகவும் மலிவாகவும் ஆக்குகிறது.
• செயல்திறன் அடிப்படையை நிறுவுங்கள்: தானியக்கம் உங்கள் பயன்பாட்டின் செயல்திறனின் வரலாற்றுப் பதிவை உருவாக்க உங்களை அனுமதிக்கிறது. இந்த போக்குத் தரவு, வளர்ச்சியின் நீண்டகால தாக்கத்தைப் புரிந்துகொள்வதற்கும் தொழில்நுட்பக் கடன் பற்றிய தகவலறிந்த முடிவுகளை எடுப்பதற்கும் விலைமதிப்பற்றது.
• செயல்திறன் பட்ஜெட்களை அமல்படுத்துங்கள்: தானியக்கம் "செயல்திறன் பட்ஜெட்டை" வரையறுத்து அமல்படுத்துவதை சாத்தியமாக்குகிறது—ஒரு பில்ட் தேர்ச்சி பெற வேண்டிய முக்கிய அளவீடுகளுக்கான வரம்புகளின் தொகுப்பு. ஒரு மாற்றம் லார்ஜஸ்ட் கன்டென்ட்ஃபுல் பெயின்ட் (LCP) 20% மெதுவாக ஆக்கினால், பில்ட் தானாகவே தோல்வியடையச் செய்யப்பட்டு, பின்னடைவு வரிசைப்படுத்தப்படுவதைத் தடுக்கலாம்.
• செயல்திறனை ஜனநாயகப்படுத்துங்கள்: செயல்திறன் பின்னூட்டம் ஒரு டெவலப்பரின் தற்போதைய பணிப்பாய்வுக்குள் தானாகவே வழங்கப்படும்போது (எ.கா., ஒரு புல் ரிக்வெஸ்ட்டில் ஒரு கருத்து), இது ஒவ்வொரு பொறியாளரையும் செயல்திறனுக்கான உரிமையை ஏற்க அதிகாரம் அளிக்கிறது. இது இனி ஒரு நிபுணரின் ஒரே பொறுப்பு அல்ல.

தொடர்ச்சியான செயல்திறன் கண்காணிப்பின் முக்கியக் கருத்துக்கள்

கருவிகளில் மூழ்குவதற்கு முன், எந்தவொரு வெற்றிகரமான செயல்திறன் கண்காணிப்பு உத்தியின் அடித்தளத்தை உருவாக்கும் அடிப்படைக் கருத்துக்களைப் புரிந்துகொள்வது அவசியம்.

கண்காணிக்க வேண்டிய முக்கிய செயல்திறன் அளவீடுகள் ("என்ன")

நீங்கள் அளவிடாததை உங்களால் மேம்படுத்த முடியாது. டஜன் கணக்கான சாத்தியமான அளவீடுகள் இருந்தாலும், சில பயனர் மைய அளவீடுகளில் கவனம் செலுத்துவது மிகவும் பயனுள்ள உத்தியாகும். கூகிளின் கோர் வெப் வைட்டல்ஸ் ஒரு சிறந்த தொடக்க புள்ளியாகும், ஏனெனில் அவை நிஜ உலக பயனர் அனுபவத்தை அளவிட வடிவமைக்கப்பட்டுள்ளன.

• லார்ஜஸ்ட் கன்டென்ட்ஃபுல் பெயின்ட் (LCP): ஏற்றுதல் செயல்திறனை அளவிடுகிறது. இது பக்க ஏற்றுதல் காலவரிசையில் முக்கிய உள்ளடக்கம் ஏற்றப்பட்டிருக்கக்கூடிய புள்ளியைக் குறிக்கிறது. ஒரு நல்ல LCP 2.5 வினாடிகள் அல்லது அதற்கும் குறைவாக இருக்கும்.
• இன்டராக்சன் டு நெக்ஸ்ட் பெயின்ட் (INP): செயல்திறனை அளவிடுகிறது. INP ஒரு பக்கத்தின் பயனர் ஊடாடல்களுக்கான ஒட்டுமொத்த பதிலளிப்பை மதிப்பிடுகிறது. இது அனைத்து கிளிக்குகள், தட்டல்கள் மற்றும் விசைப்பலகை ஊடாடல்களின் தாமதத்தைக் கவனிக்கிறது. ஒரு நல்ல INP 200 மில்லி விநாடிகளுக்குக் கீழே இருக்கும். (INP மார்ச் 2024-இல் ஃபர்ஸ்ட் இன்புட் டிலே (FID) என்பதற்கு பதிலாக கோர் வெப் வைட்டலாக மாற்றப்பட்டுள்ளது).
• குமுலேட்டிவ் லேஅவுட் ஷிஃப்ட் (CLS): காட்சி நிலைத்தன்மையை அளவிடுகிறது. பயனர்கள் அனுபவிக்கும் எதிர்பாராத லேஅவுட் மாற்றத்தின் அளவை இது கணக்கிடுகிறது. ஒரு நல்ல CLS மதிப்பெண் 0.1 அல்லது அதற்கும் குறைவாக இருக்கும்.

கோர் வெப் வைட்டல்ஸைத் தவிர, பிற முக்கியமான அளவீடுகள் பின்வருமாறு:

• டைம் டு ஃபர்ஸ்ட் பைட் (TTFB): சர்வர் மறுமொழி நேரத்தை அளவிடுகிறது. இது ஒரு அடிப்படை அளவீடு ஆகும், ஏனெனில் ஒரு மெதுவான TTFB அடுத்தடுத்த அனைத்து அளவீடுகளையும் எதிர்மறையாக பாதிக்கும்.
• ஃபர்ஸ்ட் கன்டென்ட்ஃபுல் பெயின்ட் (FCP): DOM உள்ளடக்கத்தின் முதல் பகுதி ரெண்டர் செய்யப்படும் நேரத்தைக் குறிக்கிறது. இது பக்கம் உண்மையில் ஏற்றப்படுகிறது என்ற முதல் பின்னூட்டத்தை பயனருக்கு வழங்குகிறது.
• டோட்டல் பிளாக்கிங் டைம் (TBT): FCP மற்றும் டைம் டு இன்டராக்டிவ் (TTI) இடையே உள்ள மொத்த நேரத்தை அளவிடுகிறது, இதில் உள்ளீட்டு பதிலளிப்பைத் தடுக்கும் அளவுக்கு பிரதான த்ரெட் தடுக்கப்பட்டது. இது INP உடன் நன்றாக தொடர்புடைய ஒரு சிறந்த ஆய்வக அளவீடு ஆகும்.

ஒரு செயல்திறன் பட்ஜெட்டை அமைத்தல் ("ஏன்")

ஒரு செயல்திறன் பட்ஜெட் என்பது உங்கள் குழு வேலை செய்ய ஒப்புக்கொள்ளும் தெளிவான கட்டுப்பாடுகளின் தொகுப்பாகும். இது ஒரு இலக்கு மட்டுமல்ல; இது ஒரு கடினமான வரம்பு. ஒரு பட்ஜெட் செயல்திறனை ஒரு தெளிவற்ற "அதை வேகமாக உருவாக்குவோம்" என்ற நோக்கத்திலிருந்து உங்கள் பயன்பாட்டிற்கான ஒரு உறுதியான, அளவிடக்கூடிய தேவையாக மாற்றுகிறது.

ஒரு எளிய செயல்திறன் பட்ஜெட் இப்படி இருக்கலாம்:

• LCP 2.5 வினாடிகளுக்குள் இருக்க வேண்டும்.
• TBT 200 மில்லி விநாடிகளுக்குள் இருக்க வேண்டும்.
• மொத்த ஜாவாஸ்கிரிப்ட் பண்டில் அளவு 250KB (gzipped) ஐ விட அதிகமாக இருக்கக்கூடாது.
• லைட்ஹவுஸ் செயல்திறன் மதிப்பெண் 90 அல்லது அதற்கு மேல் இருக்க வேண்டும்.

இந்த வரம்புகளை வரையறுப்பதன் மூலம், உங்கள் தானியங்கு பைப்லைன் ஒரு தெளிவான தேர்ச்சி/தோல்வி அளவுகோலைக் கொண்டுள்ளது. ஒரு புல் ரிக்வெஸ்ட் லைட்ஹவுஸ் மதிப்பெண்ணை 85 ஆகக் குறைத்தால், CI சோதனை தோல்வியடைகிறது, மேலும் டெவலப்பருக்கு உடனடியாகத் தெரிவிக்கப்படுகிறது—குறியீடு இணைக்கப்படுவதற்கு முன்பு.

செயல்திறன் கண்காணிப்பு பைப்லைன் ("எப்படி")

ஒரு பொதுவான தானியங்கு செயல்திறன் பைப்லைன் இந்த படிகளைப் பின்பற்றுகிறது:

1. தூண்டுதல்: ஒரு டெவலப்பர் புதிய குறியீட்டை ஒரு பதிப்புக் கட்டுப்பாட்டு அமைப்புக்கு (எ.கா., Git) கமிட் செய்கிறார்.
2. உருவாக்கம்: CI/CD சர்வர் (எ.கா., GitHub Actions, Jenkins, GitLab CI) குறியீட்டைப் பெற்று, பயன்பாட்டு உருவாக்க செயல்முறையை இயக்குகிறது.
3. வரிசைப்படுத்தி சோதித்தல்: பயன்பாடு ஒரு தற்காலிக ஸ்டேஜிங் அல்லது முன்னோட்ட சூழலில் வரிசைப்படுத்தப்படுகிறது. ஒரு தானியங்கு கருவி பின்னர் இந்த சூழலுக்கு எதிராக செயல்திறன் சோதனைகளின் தொகுப்பை இயக்குகிறது.
4. பகுப்பாய்வு செய்து உறுதிப்படுத்துதல்: கருவி செயல்திறன் அளவீடுகளைச் சேகரித்து, அவற்றை முன்வரையறுக்கப்பட்ட செயல்திறன் பட்ஜெட்டுடன் ஒப்பிடுகிறது.
5. அறிக்கையிட்டு நடவடிக்கை எடுத்தல்: பட்ஜெட் பூர்த்தி செய்யப்பட்டால், சோதனை தேர்ச்சி பெறுகிறது. இல்லையெனில், பில்ட் தோல்வியடைந்து, பின்னடைவை விளக்கும் ஒரு விரிவான அறிக்கையுடன் குழுவுக்கு ஒரு எச்சரிக்கை அனுப்பப்படுகிறது.

தானியங்கு ஜாவாஸ்கிரிப்ட் சுயவிவரத்திற்கான நவீன கருவித்தொகுப்பு

பல சிறந்த ஓப்பன் சோர்ஸ் கருவிகள் நவீன செயல்திறன் தானியக்கத்தின் முதுகெலும்பாக உள்ளன. மிகவும் முக்கியமானவற்றை ஆராய்வோம்.

பிளேரைட் மற்றும் பப்பட்டியர் உடன் உலாவி தானியக்கம்

பிளேரைட் (மைக்ரோசாப்ட் இடமிருந்து) மற்றும் பப்பட்டியர் (கூகிள் இடமிருந்து) ஆகியவை Node.js நூலகங்கள் ஆகும், அவை ஹெட்லெஸ் Chrome, Firefox, மற்றும் WebKit உலாவிகளைக் கட்டுப்படுத்த உயர் மட்ட API-ஐ வழங்குகின்றன. அவை பெரும்பாலும் எண்ட்-டு-எண்ட் சோதனைக்கு பயன்படுத்தப்பட்டாலும், செயல்திறன் சுயவிவரத்திற்கும் அவை மிகச் சிறந்தவை.

சிக்கலான பயனர் ஊடாடல்களை ஸ்கிரிப்ட் செய்யவும் மற்றும் DevTools-இல் பகுப்பாய்வு செய்யக்கூடிய விரிவான செயல்திறன் ட்ரேஸ்களை சேகரிக்கவும் நீங்கள் அவற்றைப் பயன்படுத்தலாம். இது ஆரம்ப பக்க ஏற்றுதல் மட்டுமல்ல, ஒரு குறிப்பிட்ட பயனர் பயணத்தின் செயல்திறனை அளவிடவும் சரியானதாகும்.

பிளேரைட்டைப் பயன்படுத்தி ஒரு செயல்திறன் ட்ரேஸ் கோப்பை உருவாக்குவதற்கான ஒரு எளிய எடுத்துக்காட்டு இங்கே:

எடுத்துக்காட்டு: பிளேரைட் உடன் ஒரு ட்ரேஸ் உருவாக்குதல்

• const { chromium } = require('playwright');
• (async () => {
• const browser = await chromium.launch({ headless: true });
• const page = await browser.newPage();
• // ட்ரேசிங்கைத் தொடங்கு, ஒரு கோப்பில் சேமி.
• await page.tracing.start({ path: 'performance-trace.json', screenshots: true });
• await page.goto('https://your-app.com/dashboard');
• // ஒரு குறிப்பிட்ட செயலை சுயவிவரப்படுத்த பக்கத்துடன் ஊடாடு
• await page.click('button#load-data-button');
• await page.waitForSelector('.data-grid-loaded'); // முடிவுக்காகக் காத்திரு
• // ட்ரேசிங்கை நிறுத்து
• await page.tracing.stop();
• await browser.close();
• console.log('Performance trace saved to performance-trace.json');
• })();

`performance-trace.json` கோப்பை நீங்கள் Chrome DevTools செயல்திறன் பேனலில் ஏற்றி, அந்த பயனர் ஊடாடலின் போது என்ன நடந்தது என்பதற்கான ஒரு செழிப்பான, பிரேம்-பை-பிரேம் பகுப்பாய்வைப் பெறலாம். இது ஒரு சக்திவாய்ந்த கண்டறியும் கருவியாக இருந்தாலும், தானியங்கு உறுதிப்படுத்தலுக்கு நமக்கு மற்றொரு அடுக்கு தேவை: லைட்ஹவுஸ்.

விரிவான தணிக்கைகளுக்கு கூகிள் லைட்ஹவுஸை மேம்படுத்துதல்

லைட்ஹவுஸ் என்பது வலைப்பக்க தரத்தை தணிக்கை செய்வதற்கான தொழில்துறை-தரமான ஓப்பன் சோர்ஸ் கருவியாகும். இது ஒரு பக்கத்திற்கு எதிராக பல சோதனைகளை இயக்கி, செயல்திறன், அணுகல்தன்மை, சிறந்த நடைமுறைகள் மற்றும் SEO பற்றிய ஒரு அறிக்கையை உருவாக்குகிறது. நமது பைப்லைனுக்கு மிக முக்கியமாக, இதை நிரல்ரீதியாக இயக்கலாம் மற்றும் செயல்திறன் பட்ஜெட்களை அமல்படுத்த உள்ளமைக்கலாம்.

லைட்ஹவுஸை ஒரு CI/CD பைப்லைனில் ஒருங்கிணைப்பதற்கான சிறந்த வழி லைட்ஹவுஸ் CI ஆகும். இது லைட்ஹவுஸை இயக்குவதை எளிதாக்கும் கருவிகளின் தொகுப்பாகும், பட்ஜெட்களுக்கு எதிராக முடிவுகளை உறுதிப்படுத்துகிறது, மற்றும் காலப்போக்கில் மதிப்பெண்களைக் கண்காணிக்கிறது.

தொடங்குவதற்கு, உங்கள் திட்டத்தின் மூலத்தில் `lighthouserc.js` என்ற உள்ளமைவுக் கோப்பை உருவாக்க வேண்டும்:

எடுத்துக்காட்டு: lighthouserc.js உள்ளமைவு

• module.exports = {
• ci: {
• collect: {
• // விருப்பம் 1: ஒரு நேரடி URL-க்கு எதிராக இயக்கு
• // url: ['https://staging.your-app.com'],
• // விருப்பம் 2: உள்நாட்டில் வழங்கப்படும் பில்ட் வெளியீட்டிற்கு எதிராக இயக்கு
• staticDistDir: './build',
• startServerCommand: 'npm run start:static',
• },
• assert: {
• preset: 'lighthouse:recommended', // புத்திசாலித்தனமான இயல்புநிலைகளுடன் தொடங்குங்கள்
• assertions: {
• // தனிப்பயன் உறுதிப்படுத்தல்கள் (உங்கள் செயல்திறன் பட்ஜெட்)
• 'categories:performance': ['error', { minScore: 0.9 }], // மதிப்பெண் >= 90 ஆக இருக்க வேண்டும்
• 'categories:accessibility': ['warn', { minScore: 0.95 }], // மதிப்பெண் >= 95 ஆக இருக்க வேண்டும்
• 'core-web-vitals/largest-contentful-paint': ['error', { maxNumericValue: 2500 }],
• 'core-web-vitals/total-blocking-time': ['error', { maxNumericValue: 200 }],
• },
• },
• upload: {
• target: 'temporary-public-storage', // தொடங்குவதற்கான எளிதான வழி
• },
• },
• };

இந்த உள்ளமைவுடன், உங்கள் கட்டளை வரி அல்லது CI ஸ்கிரிப்டிலிருந்து `lhci autorun` ஐ இயக்கலாம். இது தானாகவே உங்கள் சேவையகத்தைத் தொடங்கும், நிலைத்தன்மைக்காக லைட்ஹவுஸை பல முறை இயக்கும், உங்கள் உறுதிப்படுத்தல்களுக்கு எதிராக முடிவுகளைச் சரிபார்க்கும், மற்றும் பட்ஜெட் பூர்த்தி செய்யப்படாவிட்டால் தோல்வியடையும்.

செயற்கை கண்காணிப்பு மற்றும் உண்மையான பயனர் கண்காணிப்பு (RUM)

இரண்டு முக்கிய வகையான செயல்திறன் கண்காணிப்புக்கு இடையிலான வேறுபாட்டைப் புரிந்துகொள்வது முக்கியம்.

• செயற்கை கண்காணிப்பு (ஆய்வகத் தரவு): இது நாம் விவாதித்து வருவது—ஒரு கட்டுப்படுத்தப்பட்ட, நிலையான சூழலில் ("ஆய்வகம்") தானியங்கு சோதனைகளை இயக்குவது. இது CI/CD-க்கு சரியானது, ஏனெனில் இது உங்கள் குறியீடு மாற்றங்களின் தாக்கத்தைத் தனிமைப்படுத்துகிறது. நீங்கள் நெட்வொர்க் வேகம், சாதன வகை மற்றும் இருப்பிடத்தைக் கட்டுப்படுத்துகிறீர்கள். அதன் வலிமை நிலைத்தன்மை மற்றும் பின்னடைவு கண்டறிதல் ஆகும்.
• உண்மையான பயனர் கண்காணிப்பு (RUM) (களத் தரவு): இது உலகம் முழுவதும் உள்ள உங்கள் பயனர்களின் உண்மையான உலாவிகளிடமிருந்து செயல்திறன் தரவைச் சேகரிப்பதை உள்ளடக்கியது ("களம்"). RUM கருவிகள் (Sentry, Datadog, அல்லது New Relic போன்றவை) உங்கள் தளத்தில் ஒரு சிறிய ஜாவாஸ்கிரிப்ட் துணுக்கைப் பயன்படுத்தி, உண்மையான மக்கள் அனுபவிக்கும் கோர் வெப் வைட்டல்ஸ் மற்றும் பிற அளவீடுகளைப் புகாரளிக்கின்றன. அதன் வலிமை, எண்ணற்ற சாதனம் மற்றும் நெட்வொர்க் சேர்க்கைகளில் உலகளாவிய பயனர் அனுபவத்தின் உண்மையான படத்தை வழங்குவதாகும்.

இரண்டும் ஒன்றுக்கொன்று பிரத்தியேகமானவை அல்ல; அவை நிரப்புபவை. பின்னடைவுகள் வரிசைப்படுத்தப்படுவதைத் தடுக்க உங்கள் CI/CD பைப்லைனில் செயற்கை கண்காணிப்பைப் பயன்படுத்தவும். உற்பத்தியில் உங்கள் உண்மையான பயனர்களின் அனுபவத்தைப் புரிந்துகொள்ளவும் மற்றும் உங்கள் ஆய்வக சோதனைகள் தவறவிடக்கூடிய மேம்பாட்டுப் பகுதிகளை அடையாளம் காணவும் RUM-ஐப் பயன்படுத்தவும்.

உங்கள் CI/CD பைப்லைனில் செயல்திறன் சுயவிவரத்தை ஒருங்கிணைத்தல்

கோட்பாடு சிறந்தது, ஆனால் நடைமுறை அமலாக்கமே முக்கியம். ஒரு GitHub Actions பணிப்பாய்வுக்குள் லைட்ஹவுஸ் CI-ஐப் பயன்படுத்தி ஒரு எளிய செயல்திறன் சோதனையை உருவாக்குவோம்.

GitHub Actions உடன் ஒரு நடைமுறை எடுத்துக்காட்டு

இந்த பணிப்பாய்வு ஒவ்வொரு புல் ரிக்வெஸ்ட்டிலும் இயங்கும். இது பயன்பாட்டை உருவாக்குகிறது, அதற்கு எதிராக லைட்ஹவுஸ் CI-ஐ இயக்குகிறது, மற்றும் முடிவுகளை புல் ரிக்வெஸ்ட்டில் ஒரு கருத்தாக இடுகிறது.

`.github/workflows/performance-ci.yml` என்ற இடத்தில் ஒரு கோப்பை உருவாக்கவும்:

எடுத்துக்காட்டு: .github/workflows/performance-ci.yml

• name: Performance CI
• on: [pull_request]
• jobs:
• lighthouse:
• runs-on: ubuntu-latest
• steps:
• - uses: actions/checkout@v3
• - name: Use Node.js 20.x
• uses: actions/setup-node@v3
• with:
• node-version: '20.x'
• cache: 'npm'
• - name: Install dependencies
• run: npm ci
• - name: Build production assets
• run: npm run build
• - name: Run Lighthouse CI
• run: |
• npm install -g @lhci/cli@0.12.x
• lhci autorun
• env:
• LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}

இதை வேலை செய்ய, உங்களுக்கு இரண்டு விஷயங்கள் தேவை:

1. முந்தைய பிரிவில் காட்டப்பட்டுள்ளபடி, உங்கள் களஞ்சியத்தில் ஒரு `lighthouserc.js` கோப்பு.
2. உங்கள் களஞ்சியத்தில் Lighthouse CI GitHub App நிறுவப்பட்டிருக்க வேண்டும். இது லைட்ஹவுஸ் CI-ஐ கருத்துகள் மற்றும் நிலைச் சோதனைகளை இட அனுமதிக்கிறது. நிறுவப்பட்ட போது நீங்கள் ஒரு டோக்கனை (`LHCI_GITHUB_APP_TOKEN`) பெறுவீர்கள், அதை உங்கள் GitHub களஞ்சிய அமைப்புகளில் ஒரு ரகசியமாக சேமிக்க வேண்டும்.

இப்போது, ஒரு டெவலப்பர் ஒரு புல் ரிக்வெஸ்ட்டைத் திறக்கும்போது, ஒரு நிலைச் சோதனை தோன்றும். செயல்திறன் பட்ஜெட் தோல்வியுற்றால், சோதனை சிவப்பாக இருக்கும். லைட்ஹவுஸ் மதிப்பெண்களுடன் ஒரு விரிவான கருத்து இடப்படும், இது எந்த அளவீடுகள் பின்னடைவைக் கண்டன என்பதைத் துல்லியமாகக் காட்டும்.

செயல்திறன் தரவைச் சேமித்தல் மற்றும் காட்சிப்படுத்துதல்

`temporary-public-storage` தொடங்குவதற்குச் சிறந்தது என்றாலும், நீண்ட கால பகுப்பாய்விற்கு, உங்கள் லைட்ஹவுஸ் அறிக்கைகளைச் சேமிக்க விரும்புவீர்கள். லைட்ஹவுஸ் CI சர்வர் என்பது நீங்கள் சுயமாக ஹோஸ்ட் செய்யக்கூடிய ஒரு இலவச, ஓப்பன் சோர்ஸ் தீர்வாகும். இது காலப்போக்கில் செயல்திறன் போக்குகளைக் காட்சிப்படுத்தவும், கிளைகளுக்கு இடையில் அறிக்கைகளை ஒப்பிடவும், மற்றும் ஒரு ஒற்றை ஓட்டத்தில் தவறவிடக்கூடிய படிப்படியான செயல்திறன் சிதைவை அடையாளம் காணவும் ஒரு டாஷ்போர்டை வழங்குகிறது.

உங்கள் சொந்த சேவையகத்திற்கு பதிவேற்ற உங்கள் `lighthouserc.js`-ஐ உள்ளமைப்பது எளிது. இந்த வரலாற்றுத் தரவு உங்கள் பைப்லைனை ஒரு எளிய வாயிற்காப்பாளனிலிருந்து ஒரு சக்திவாய்ந்த பகுப்பாய்வுக் கருவியாக மாற்றுகிறது.

எச்சரிக்கை மற்றும் அறிக்கையிடல்

புதிரின் இறுதிப் பகுதி பயனுள்ள தகவல்தொடர்பு ஆகும். ஒரு தோல்வியுற்ற பில்ட் சரியான நபர்களுக்கு உடனடியாகத் தெரிவிக்கப்பட்டால் மட்டுமே பயனுள்ளதாக இருக்கும். GitHub நிலைச் சோதனைகளுக்கு அப்பால், உங்கள் குழுவின் முதன்மைத் தகவல்தொடர்பு சேனலில், அதாவது Slack அல்லது Microsoft Teams போன்றவற்றில் எச்சரிக்கைகளை அமைக்கப் பரிசீலிக்கவும். ஒரு நல்ல எச்சரிக்கை பின்வருவனவற்றைக் கொண்டிருக்க வேண்டும்:

• தோல்வியை ஏற்படுத்திய குறிப்பிட்ட புல் ரிக்வெஸ்ட் அல்லது கமிட்.
• எந்த செயல்திறன் அளவீடு(கள்) பட்ஜெட்டை மீறியது மற்றும் எவ்வளவு.
• ஆழமான பகுப்பாய்விற்காக முழு லைட்ஹவுஸ் அறிக்கைக்கு ஒரு நேரடி இணைப்பு.

மேம்பட்ட உத்திகள் மற்றும் உலகளாவிய பரிசீலனைகள்

நீங்கள் ஒரு அடிப்படை பைப்லைனை அமைத்தவுடன், உங்கள் உலகளாவிய பயனர் தளத்தை சிறப்பாகப் பிரதிபலிக்க அதை மேம்படுத்தலாம்.

பல்வேறு நெட்வொர்க் மற்றும் CPU நிலைமைகளை உருவகப்படுத்துதல்

உங்கள் பயனர்கள் அனைவரும் ஃபைபர் ஆப்டிக் இணைப்புகளில் உயர்நிலை செயலிகளுடன் இல்லை. மிகவும் யதார்த்தமான நிலைமைகளின் கீழ் சோதிப்பது முக்கியம். லைட்ஹவுஸ் இயல்பாகவே மெதுவான நெட்வொர்க் மற்றும் CPU-ஐ உருவகப்படுத்தும் உள்ளமைக்கப்பட்ட த்ராட்லிங்கைக் கொண்டுள்ளது (4G இணைப்பில் ஒரு நடுத்தர மொபைல் சாதனத்தை உருவகப்படுத்துகிறது).

பல்வேறு சூழ்நிலைகளைச் சோதிக்க உங்கள் லைட்ஹவுஸ் உள்ளமைவில் இந்த அமைப்புகளைத் தனிப்பயனாக்கலாம், இது குறைவான வளர்ந்த இணைய உள்கட்டமைப்புள்ள சந்தைகளில் உள்ள வாடிக்கையாளர்களுக்கு உங்கள் பயன்பாடு பயன்படுத்தக்கூடியதாக இருப்பதை உறுதி செய்கிறது.

குறிப்பிட்ட பயனர் பயணங்களை சுயவிவரப்படுத்துதல்

ஆரம்ப பக்க ஏற்றுதல் பயனர் அனுபவத்தின் ஒரு பகுதி மட்டுமே. ஒரு பொருளை வண்டியில் சேர்ப்பது, ஒரு தேடல் வடிப்பானைப் பயன்படுத்துவது அல்லது ஒரு படிவத்தைச் சமர்ப்பிப்பது போன்றவற்றின் செயல்திறன் என்ன? இந்த முக்கியமான ஊடாடல்களை சுயவிவரப்படுத்த நீங்கள் பிளேரைட் மற்றும் லைட்ஹவுஸின் சக்தியை இணைக்கலாம்.

ஒரு பொதுவான முறை, பயன்பாட்டை ஒரு குறிப்பிட்ட நிலைக்கு (எ.கா., உள்நுழை, வண்டியில் பொருட்களைச் சேர்) செல்ல ஒரு பிளேரைட் ஸ்கிரிப்டைப் பயன்படுத்துவது, பின்னர் அந்த பக்க நிலையில் அதன் தணிக்கையை இயக்க லைட்ஹவுஸிடம் கட்டுப்பாட்டை ஒப்படைப்பதாகும். இது உங்கள் பயன்பாட்டின் செயல்திறனின் மிகவும் முழுமையான பார்வையை வழங்குகிறது.

முடிவுரை: ஒரு செயல்திறன் கலாச்சாரத்தை உருவாக்குதல்

ஜாவாஸ்கிரிப்ட் செயல்திறன் கண்காணிப்பை தானியக்கமாக்குவது கருவிகள் மற்றும் ஸ்கிரிப்ட்களைப் பற்றியது மட்டுமல்ல; இது செயல்திறன் ஒரு பகிரப்பட்ட பொறுப்பாக இருக்கும் ஒரு கலாச்சாரத்தை வளர்ப்பதாகும். செயல்திறன் ஒரு முதல்-வகுப்பு அம்சமாக, அளவிடக்கூடியதாகவும் மற்றும் பேச்சுவார்த்தைக்குட்படாததாகவும் கருதப்படும்போது, அது ஒரு பிந்தைய சிந்தனையாக இல்லாமல் வளர்ச்சி செயல்முறையின் ஒரு ஒருங்கிணைந்த பகுதியாகிறது.

ஒரு எதிர்வினை, கைமுறை அணுகுமுறையிலிருந்து ஒரு முன்னோக்கிய, தானியங்கு பைப்லைனுக்கு மாறுவதன் மூலம், நீங்கள் பல முக்கியமான வணிக நோக்கங்களை அடைகிறீர்கள்:

• பயனர் அனுபவத்தைப் பாதுகாத்தல்: செயல்திறன் பின்னடைவுகள் உங்கள் பயனர்களைப் பாதிப்பதைத் தடுக்கும் ஒரு பாதுகாப்பு வலையை நீங்கள் உருவாக்குகிறீர்கள்.
• மேம்பாட்டு வேகத்தை அதிகரித்தல்: உடனடி பின்னூட்டத்தை வழங்குவதன் மூலம், டெவலப்பர்களை சிக்கல்களை விரைவாகவும் நம்பிக்கையுடனும் சரிசெய்ய அதிகாரம் அளிக்கிறீர்கள், நீண்ட, வலிமிகுந்த மேம்படுத்தல் சுழற்சிகளைக் குறைக்கிறீர்கள்.
• தரவு-தகவலறிந்த முடிவுகளை எடுத்தல்: கட்டடக்கலை முடிவுகளை வழிநடத்தவும் மற்றும் மேம்படுத்தலில் முதலீடுகளை நியாயப்படுத்தவும் கூடிய செயல்திறன் போக்குகளின் ஒரு செழிப்பான தரவுத்தொகுப்பை நீங்கள் உருவாக்குகிறீர்கள்.

பயணம் சிறியதாகத் தொடங்குகிறது. உங்கள் முக்கியக் கிளைக்கு ஒரு எளிய லைட்ஹவுஸ் CI சோதனையைச் சேர்ப்பதன் மூலம் தொடங்குங்கள். ஒரு பழமைவாத செயல்திறன் பட்ஜெட்டை அமைக்கவும். உங்கள் குழு பின்னூட்டத்துடன் வசதியாகும்போது, உங்கள் கவரேஜை புல் ரிக்வெஸ்ட்களுக்கு விரிவுபடுத்துங்கள், மேலும் நுணுக்கமான அளவீடுகளை அறிமுகப்படுத்துங்கள், மற்றும் முக்கியமான பயனர் பயணங்களை சுயவிவரப்படுத்தத் தொடங்குங்கள். செயல்திறன் ஒரு தொடர்ச்சியான பயணம், ஒரு இலக்கு அல்ல. ஒரு முன்னோக்கிய பைப்லைனை உருவாக்குவதன் மூலம், நீங்கள் அனுப்பும் ஒவ்வொரு குறியீட்டு வரியும் உங்கள் பயனர்களின் மிகவும் மதிப்புமிக்க சொத்தான அவர்களின் நேரத்தை மதிக்கிறது என்பதை உறுதி செய்கிறீர்கள்.